// CSS 变量定义
:root {
  // 主色调
  --primary-color: #409EFF;
  --primary-light: #79bbff;
  --primary-dark: #337ecc;
  
  // 功能色
  --success-color: #67C23A;
  --warning-color: #E6A23C;
  --danger-color: #F56C6C;
  --info-color: #909399;
  
  // 文本色
  --text-primary: #303133;
  --text-regular: #606266;
  --text-secondary: #909399;
  --text-placeholder: #C0C4CC;
  
  // 背景色
  --bg-color: #ffffff;
  --bg-color-page: #f5f7fa;
  --bg-color-overlay: rgba(255, 255, 255, 0.8);
  
  // 边框色
  --border-color: #DCDFE6;
  --border-color-light: #E4E7ED;
  --border-color-lighter: #EBEEF5;
  --border-color-extra-light: #F2F6FC;
  
  // 阴影
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  --shadow-dark: 0 4px 8px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  
  // 圆角
  --border-radius-small: 2px;
  --border-radius-base: 4px;
  --border-radius-large: 6px;
  --border-radius-round: 20px;
  --border-radius-circle: 50%;
  
  // 字体大小
  --font-size-extra-small: 12px;
  --font-size-small: 13px;
  --font-size-base: 14px;
  --font-size-medium: 16px;
  --font-size-large: 18px;
  --font-size-extra-large: 20px;
  
  // 字体粗细
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  // 行高
  --line-height-small: 1.2;
  --line-height-base: 1.5;
  --line-height-large: 1.8;
  
  // 间距
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  
  // 组件尺寸
  --component-size-large: 40px;
  --component-size-default: 32px;
  --component-size-small: 24px;
  
  // 动画时长
  --transition-duration-fast: 0.2s;
  --transition-duration-base: 0.3s;
  --transition-duration-slow: 0.5s;
  
  // 动画函数
  --transition-function-ease-in-out-bezier: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-function-fast-bezier: cubic-bezier(0.23, 1, 0.32, 1);
  
  // Z-index 层级
  --z-index-normal: 1;
  --z-index-top: 1000;
  --z-index-popper: 2000;
  
  // 断点
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  // 容器最大宽度
  --container-max-width: 1200px;
  
  // 头部高度
  --header-height: 80px;
  --header-height-mobile: 60px;
  
  // 侧边栏宽度
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  
  // 底部高度
  --footer-height: 200px;
  --footer-height-mobile: 160px;
}

// SCSS 变量
$primary-color: var(--primary-color);
$success-color: var(--success-color);
$warning-color: var(--warning-color);
$danger-color: var(--danger-color);
$info-color: var(--info-color);

$text-primary: var(--text-primary);
$text-regular: var(--text-regular);
$text-secondary: var(--text-secondary);
$text-placeholder: var(--text-placeholder);

$bg-color: var(--bg-color);
$bg-color-page: var(--bg-color-page);

$border-color: var(--border-color);
$border-color-light: var(--border-color-light);
$border-color-lighter: var(--border-color-lighter);

$border-radius-base: var(--border-radius-base);
$border-radius-large: var(--border-radius-large);
$border-radius-round: var(--border-radius-round);

$font-size-base: var(--font-size-base);
$font-size-large: var(--font-size-large);
$font-size-small: var(--font-size-small);

$spacing-sm: var(--spacing-sm);
$spacing-md: var(--spacing-md);
$spacing-lg: var(--spacing-lg);

$transition-duration-base: var(--transition-duration-base);

// 渐变色
$gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$gradient-success: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
$gradient-warning: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
$gradient-danger: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
$gradient-info: linear-gradient(135deg, #909399 0%, #a6a9ad 100%);

// 主题色板
$color-palette: (
  'primary': (
    'base': #409EFF,
    'light-1': #53a8ff,
    'light-2': #66b1ff,
    'light-3': #79bbff,
    'light-4': #8cc5ff,
    'light-5': #a0cfff,
    'light-6': #b3d8ff,
    'light-7': #c6e2ff,
    'light-8': #d9ecff,
    'light-9': #ecf5ff,
    'dark-1': #3a8ee6,
    'dark-2': #337ecc,
    'dark-3': #2d70b3,
    'dark-4': #266199,
    'dark-5': #1f5280,
    'dark-6': #194266,
    'dark-7': #12334d,
    'dark-8': #0b2333,
    'dark-9': #05141a
  ),
  'success': (
    'base': #67C23A,
    'light-1': #73c946,
    'light-2': #7fd151,
    'light-3': #8bd85d,
    'light-4': #97df69,
    'light-5': #a3e675,
    'light-6': #afed81,
    'light-7': #bbf48d,
    'light-8': #c7fb99,
    'light-9': #d3ffa5,
    'dark-1': #5daf34,
    'dark-2': #529b2e,
    'dark-3': #478828,
    'dark-4': #3d7422,
    'dark-5': #32611c,
    'dark-6': #274e16,
    'dark-7': #1c3a10,
    'dark-8': #11270a,
    'dark-9': #061304
  ),
  'warning': (
    'base': #E6A23C,
    'light-1': #e8ab4a,
    'light-2': #eab558,
    'light-3': #ecbe66,
    'light-4': #eec874,
    'light-5': #f0d182,
    'light-6': #f2db90,
    'light-7': #f4e49e,
    'light-8': #f6eeac,
    'light-9': #f8f7ba,
    'dark-1': #cf9236,
    'dark-2': #b88230,
    'dark-3': #a1722a,
    'dark-4': #8a6224,
    'dark-5': #73521e,
    'dark-6': #5c4218,
    'dark-7': #453212,
    'dark-8': #2e220c,
    'dark-9': #171206
  ),
  'danger': (
    'base': #F56C6C,
    'light-1': #f67676,
    'light-2': #f78080,
    'light-3': #f88a8a,
    'light-4': #f99494,
    'light-5': #fa9e9e,
    'light-6': #fba8a8,
    'light-7': #fcb2b2,
    'light-8': #fdbcbc,
    'light-9': #fec6c6,
    'dark-1': #dd6161,
    'dark-2': #c55656,
    'dark-3': #ad4b4b,
    'dark-4': #954040,
    'dark-5': #7d3535,
    'dark-6': #652a2a,
    'dark-7': #4d1f1f,
    'dark-8': #351414,
    'dark-9': #1d0909
  ),
  'info': (
    'base': #909399,
    'light-1': #9a9ca3,
    'light-2': #a4a6ad,
    'light-3': #aeafb7,
    'light-4': #b8b9c1,
    'light-5': #c2c3cb,
    'light-6': #ccccd5,
    'light-7': #d6d6df,
    'light-8': #e0e0e9,
    'light-9': #eaeaf3,
    'dark-1': #82848a,
    'dark-2': #74767b,
    'dark-3': #66686c,
    'dark-4': #585a5d,
    'dark-5': #4a4c4e,
    'dark-6': #3c3e3f,
    'dark-7': #2e3030,
    'dark-8': #202221,
    'dark-9': #121412
  )
);

// 获取颜色函数
@function get-color($color, $level: 'base') {
  @return map-get(map-get($color-palette, $color), $level);
}

// 响应式断点
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

// 媒体查询 mixin
@mixin respond-to($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (min-width: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin respond-below($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media (max-width: map-get($breakpoints, $breakpoint) - 1px) {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
        + "Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

// 容器 mixin
@mixin container {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  
  @include respond-below(md) {
    padding: 0 var(--spacing-sm);
  }
}

// 文本省略 mixin
@mixin text-ellipsis($lines: 1) {
  @if $lines == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// 清除浮动 mixin
@mixin clearfix {
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

// 居中 mixin
@mixin center($position: absolute) {
  position: $position;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// 垂直居中 mixin
@mixin center-vertical($position: absolute) {
  position: $position;
  top: 50%;
  transform: translateY(-50%);
}

// 水平居中 mixin
@mixin center-horizontal($position: absolute) {
  position: $position;
  left: 50%;
  transform: translateX(-50%);
}

// 阴影 mixin
@mixin shadow($level: 'base') {
  @if $level == 'light' {
    box-shadow: var(--shadow-light);
  } @else if $level == 'base' {
    box-shadow: var(--shadow-base);
  } @else if $level == 'dark' {
    box-shadow: var(--shadow-dark);
  }
}

// 过渡动画 mixin
@mixin transition($property: all, $duration: var(--transition-duration-base), $timing-function: ease) {
  transition: $property $duration $timing-function;
}
